<template>
  <!-- 早到统计 -->
  <view class="container">
    <up-collapse border :value="['0']">
      <up-collapse-item value="今天(2025.05.12)" name="0">
        <view style="padding-left: 5px;">
          <view class="detail-item">
            <!-- 排名 -->
            <view class="rank-box">
              <text class="rank-num">1</text>
            </view>

            <!-- 用户信息 -->
            <view class="user-info">
              <text class="name">李昕</text>
              <text class="department">未上榜</text>
            </view>

            <view class="icon-container" style="position: relative; right: -15px;">
              <view class="number">0</view>
              <tui-icon name="agree-fill" class="icon"></tui-icon>
            </view>
          </view>
        </view>
      </up-collapse-item>
    </up-collapse>

    <view style="background-color: #f7f7f7;border-radius: 5px;margin-bottom: 5px;border-top: 1px solid #ccc; ">
    </view>

    <view class="u-page">
      <up-list @scrolltolower="scrolltolower">
        <up-list-item v-for="(item, index) in rankingList" :key="index">
          <view class="detail-item">
            <!-- 排名 -->
            <view style="width: 20px;position: relative;left: -10px;">
              <text>{{ index + 1 }}</text>
            </view>
            <view class="rank-box">
              <text class="rank-num">{{ index + 1 }}</text>
            </view>

            <!-- 用户信息 -->
            <view class="user-info">
              <text class="name">{{ item.name || '未命名' }}</text>
              <text class="department">{{ item.department || '未设置部门' }}</text>
            </view>

            <!-- 早到时间 -->
            <view class="time-box">
              <text class="time">05:25</text>
              <text class="time-label">早到时间</text>
            </view>

            <view class="icon-container">
              <view class="number">0</view>
              <tui-icon name="agree-fill" class="icon"></tui-icon>
            </view>
          </view>
        </up-list-item>
      </up-list>
    </view>
  </view>
</template>

<script>
import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";

export default {
  components: {
    tuiIcon
  },
  data () {
    return {
      rankingList: [
        { name: '李昕', department: '产品策划部' },
        { name: '王业亮', department: '办公室' },
        { name: '蔡高贺', department: '技术部' },
        { name: '包超', department: '办公室' },
        { name: '李联结', department: '宣传策划部' },
        { name: '庞金义', department: '生产技术' },
        { name: '李彩侠', department: '办公室' },
        { name: '李文进', department: '生产' },
        { name: '张雪银', department: '' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' },
        { name: '李文进', department: '生产' }
      ]
    };
  },
  onLoad () {
    this.loadmore();
  },
  mounted () {
    // console.log('早到统计');
  },
  methods: {
    loadmore () {
      // console.log('触发了');
    },
    scrolltolower () {
      this.loadmore();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}

.detail-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 10rpx;

  .user-info {
    flex: 1;
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;

    .name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .department {
      font-size: 24rpx;
      color: #999;
    }
  }

  .time-box {
    text-align: right;
    margin-right: 20rpx;

    .time-label {
      display: block;
      font-size: 24rpx;
      color: #999;
    }

    .time {
      font-size: 36rpx;
      color: #07c160;
      font-weight: 500;
    }
  }
}

.rank-box {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #07c160;
  display: flex;
  align-items: center;
  justify-content: center;

  .rank-num {
    color: white;
    font-weight: bold;
  }
}

.icon-container {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;

  .number {
    font-size: 28rpx;
    color: #666;
    line-height: 1;
  }

  .icon {
    font-size: 40rpx !important;
    color: #07c160;
  }
}

.u-page {
  margin-bottom: 50px;
  flex: 1;
  overflow-y: auto;

  >view:first-child {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
}
</style>
